<template>
	<div class="search-container">
		<el-form label-position="top" label-width="80px" :model="form">
			<template>
				<el-form-item label="操作时间">
					<el-col :span="11" class="start-time">
						<el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
					</el-col>
				</el-form-item>
				<el-form-item label="操作时间" class="end-time-form-item">
					<el-col :span="11">
						<el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间" align="right" :picker-options="pickerOptions"> </el-date-picker>
					</el-col>
				</el-form-item>
			</template>

			<template v-if="searchType === 'operation'">
				<el-form-item label="操作类型">
					<el-select v-model="form.operationType" placeholder="全部">
						<el-option v-for="item in operationOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="操作人">
					<el-input placeholder="请输入操作人员用户名" v-model="form.operationName"></el-input>
				</el-form-item>
			</template>

			<template v-if="searchType === 'agentStatus'">
				<el-form-item label="坐席用户名">
					<el-input placeholder="请输入坐席用户名" v-model="form.agentId"></el-input>
				</el-form-item>

				<!-- <el-form-item label="分组">
					<el-select v-model="form.group" placeholder="全部">
						<el-option v-for="item in groupOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item> -->

				<el-form-item label="状态">
					<el-select v-model="form.status" placeholder="全部">
						<el-option v-for="item in statusOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
					</el-select>
				</el-form-item>
			</template>

			<el-form-item label="" class="btn">
				<el-button @click="searchData">检索</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
export default {
	props: {
		searchType: {
			type: String,
			default: () => '',
			required: true
		},
		groupOptions: {
			type: Array,
			default: () => []
		}
	},
	data() {
		return {
			form: {
				startTime: '',
				endTime: '',
				operationType: '',
				operationName: '',
				agentId: '',
				group: '',
				status: ''
			},
			pickerOptions: {
				shortcuts: [
					{
						text: '今天',
						onClick(picker) {
							picker.$emit('pick', new Date());
						}
					},
					{
						text: '昨天',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24);
							picker.$emit('pick', date);
						}
					},
					{
						text: '一周前',
						onClick(picker) {
							const date = new Date();
							date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', date);
						}
					}
				]
			},
			operationOptions: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 0,
					label: '登入/登出'
				},
				{
					value: 1,
					label: '运营管理'
				}
			],
			statusOptions: [
				{
					value: '',
					label: '全部'
				},
				{
					value: 'offline',
					label: '下线'
				},
				{
					value: 'notReady',
					label: '示忙'
				},
				{
					value: 'ready',
					label: '示闲'
				},
				{
					value: 'ringing',
					label: '振铃中'
				},
				{
					value: 'serving',
					label: '会话中'
				},
				{
					value: 'afterWork',
					label: '话后整理'
				},
				{
					value: 'otherWork',
					label: '小休'
				}
			]
		};
	},
	methods: {
		searchData() {
			this.form.startTime = this.form.startTime ? this.$moment(this.form.startTime).toISOString() : '';
			this.form.endTime = this.form.endTime ? this.$moment(this.form.endTime).toISOString() : '';
			const { startTime, endTime, operationName, operationType, agentId, group, status } = this.form;
			if (this.searchType === 'operation') {
				this.$emit('searchData', { startTime: startTime, endTime: endTime, operationName: operationName, operationType: operationType });
			} else if (this.searchType === 'agentStatus') {
				this.$emit('searchData', { startTime: startTime, endTime: endTime, agentId: agentId, group: group, status: status });
			}
		}
	}
};
</script>

<style lang="less" scoped>
.search-container {
	height: 100px;
	.el-form {
		display: flex;
		.el-form-item {
			padding-right: 14px;
		}

		.btn {
			padding: 0;
			.el-button {
				height: 34px;
				width: 64px;
				padding: 0;
				border: 1px solid #6384fe;
				color: #6384fe;
			}
		}
	}
}
</style>

<style lang="less">
.search-container {
	.el-form-item {
		label {
			padding: 0;
		}
		input {
			height: 34px;
		}
	}
	.btn {
		.el-form-item__content {
			line-height: 120px;
		}
	}
	.end-time-form-item {
		label {
			visibility: hidden;
		}
	}
}
</style>
